body,p,ul,li{margin:0;}
ul,li{list-style:none;padding:0;}
html,body{height: 100%;overflow-y:hidden;}
#header{height: 100px;background-color:rgb(0, 183, 255);}
#body{
    height: calc( 100vh - 200px);
    background-color: rgb(0 183 255);
}
#footer{
    height: 100px;
    background-color: rgb(48, 48, 48);
    font-size: 12px;
}
#body>div{float:left;height: 100%;}
#body #left{
    width:230px;
    background-color:rgb(0, 183, 255);
    color:#fff;
    overflow-y:scroll;
}
#body #left::-webkit-scrollbar{/*整个滚动条*/
    width: 5px;
    background-color:rgb(0 0 0 / 0%);
}
#body #left::-webkit-scrollbar-thumb{/*滚动条*/
    background-color:rgba(0,0,0,.1);
    border-radius: 5px;
}
#body #left::-webkit-scrollbar-track{
}
#body #left::-webkit-scrollbar-button{/*上下按钮*/
height:0;

}
#body #left::-webkit-scrollbar-track-piece{
}
#body #left::-webkit-scrollbar-corner{
}
#body #left::-webkit-resizer{/*轨道*/
}
#body #right{
    width:calc( 100vw - 230px );
    background-color:rgb(214 214 214);
}
#right .content{
    height:calc( 100% - 20px);margin: 10px;box-sizing: border-box;
    background-color:rgb(243 243 243);
    padding: 40px 60px;
    white-space: pre;
}

#footer{color:#fff;text-align: center;padding:30px;}
@media(max-width:600px) {

    body #header{height:30px;}
    body #header #logo{
        width:60px;height:30px;
        color:#fff;font-size: 12px;
    }
    body #header #nav{
        width:calc( 100vw - 60px);
    }
    body #body{
        height: calc( 100vh - 60px);
    }
    body #body #left{
        height: calc( 100% - 60px);
        position:absolute;top:30px;left:0;
        background:rgba(0,0,0,.5);
    }
    body #body #right{width:100%;}

    body #footer{height:30px;padding:0;}
    body #footer p{
        display:inline-block;
        text-align: center;line-height: 30px;
    }
